import React from "react";
import { connect } from "react-redux";
import {
  Button,
  Checkbox,
  Switch,
  Icon,
  Spin,
  Select,
  InputNumber,
  Input,
  Radio,
  Modal,
  Row,
  Col,
  TimePicker,
} from "antd";
import LanguageInput from "components/template/language-input/language-input";
import formService from "containers/setting/form/form.service";
import baseService from "share/base.service";
import "styles/components/template/widget/widget-setting.scss";
import { messages, randomString, deepCopy } from "share/common";
import LinkageSwitchItem from "components/template/widget/linkage-switch-item";
import moment from "moment";
import config from "config";
import UnifiedTableConfig from "components/template/widget/unified-table/UnifiedTableConfig";

const RadioGroup = Radio.Group;
const { Option } = Select;

class WidgetSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      widget: {},
      baseWidget: null,
      refreshLinkage: false, // 重新render联动开关
      enumerations: {
        fetched: false,
        data: [],
        service: formService.getCustomEnumeration(
          0,
          100,
          this.props.isExtendField ||
            this.props.tenantMode ||
            this.props.disabled
        ),
      },
      costCenters: {},
      companyFields: {},
      linkageCostCenters: {},
      loading: false,
    };
  }

  componentWillMount() {
    const { widget, widgetList, isFormDesign } = this.props;
    this.updateWidget(widget, widgetList);

    if (isFormDesign) {
      let { formOID } = this.props;
      if (this.props.profile["_self.company.contact.custom.form"]) {
        formOID = this.props.profile["_self.company.contact.custom.form"];
      }
      const companyFields = {
        fetched: false,
        data: [],
        service: formService.getFormDetail(formOID),
        listKey: "customFormFields",
      };
      let booksID = "";
      if (this.props.tenantMode) {
        booksID = this.props.booksID;
      } else {
        booksID = this.props.company.setOfBooksId;
      }
      const costCenters = {
        fetched: false,
        data: [],
        service: baseService.getCostCenter(booksID),
      };
      const linkageCostCenters = {
        fetched: false,
        data: [],
        service: baseService.getLinkageCostCenter(booksID),
      };
      this.setState({
        companyFields,
        costCenters,
        linkageCostCenters,
      });
    } else {
      const companyFields = {
        fetched: false,
        data: [],
        service: formService.getFormDetail(
          this.props.profile["_self.company.contact.custom.form"]
        ),
        listKey: "customFormFields",
      };
      const costCenters = {
        fetched: false,
        data: [],
        service: baseService.getCostCenter(),
      };
      this.setState({
        companyFields,
        costCenters,
      });
    }
  }

  getDataBeforeRender = (type) => {
    const target = this.state[type];
    !target.fetched &&
      this.setState({ loading: true }, () => {
        target.service
          .then((res) => {
            const result = {
              data: target.listKey ? res.data[target.listKey] : res.data,
              fetched: true,
              service: target.service,
            };
            this.setState({ [type]: result, loading: false });
          })
          .catch((e) => {
            this.setState({ loading: false });
          });
      });
  };

  // 有些控件上选过的字段就不能再被选中了
  renderEmployeeExpand = () => {
    const { widget, companyFields } = this.state;
    const { nowWidgetList } = this.props;
    // 处理个人扩展字段
    const selectedOIDList = [];
    let currentOID = this.getInitialValue("dataSource", "fieldOID");
    nowWidgetList.map((singleWidget) => {
      if (
        singleWidget.messageKey === "employee_expand" &&
        singleWidget.dataSource
      ) {
        selectedOIDList.push(JSON.parse(singleWidget.dataSource).fieldOID);
      }
    });
    const companyFieldData = [];
    let isHasCurrentOID = false; // 之前选择的扩展字段是否还存在，如果不存在了，则要清除
    companyFields.data &&
      companyFields.data.map((singleCompanyField) => {
        if (
          selectedOIDList.indexOf(singleCompanyField.fieldOID) == -1 ||
          singleCompanyField.fieldOID === currentOID
        ) {
          companyFieldData.push(singleCompanyField);
        }
        if (singleCompanyField.fieldOID === currentOID) {
          isHasCurrentOID = true;
        }
      });
    if (!isHasCurrentOID) {
      currentOID = "";
    }
    return (
      <div>
        <div className="form-title">
          {messages("components.key567" /* 选择扩展字段 */)}
        </div>
        <Select
          disabled={this.props.disabled}
          onChange={(value) =>
            this.handleChangeAttr(
              value,
              "dataSource",
              "fieldOID",
              "employee_expand"
            )
          }
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          value={currentOID}
        >
          {companyFieldData.map((item) => (
            <Option key={item.fieldOID}>{item.fieldName}</Option>
          ))}
        </Select>
      </div>
    );
  };

  renderCostCenter = () => {
    const { widget, costCenters } = this.state;
    const { nowWidgetList, isFormDesign, disabled } = this.props;
    // 处理成本中心
    const selectedOIDList = [];
    let currentOID = this.getInitialValue("dataSource", "costCenterOID");
    nowWidgetList.map((singleWidget) => {
      if (
        singleWidget.messageKey === "select_cost_center" &&
        singleWidget.dataSource
      ) {
        selectedOIDList.push(JSON.parse(singleWidget.dataSource).costCenterOID);
      }
    });
    const costCenterData = [];
    let isHasCurrentOID = false; // 之前选择的扩展字段是否还存在，如果不存在了，则要清除
    costCenters.data.map((singleCostCenterField) => {
      if (
        selectedOIDList.indexOf(singleCostCenterField.costCenterOID) == -1 ||
        singleCostCenterField.costCenterOID === currentOID
      ) {
        costCenterData.push(singleCostCenterField);
      }
      if (singleCostCenterField.costCenterOID === currentOID) {
        isHasCurrentOID = true;
      }
    });
    if (!isHasCurrentOID) {
      currentOID = "";
    }
    return (
      <div>
        {isFormDesign && (
          <div className="check-box-area">
            <span>{messages("components.key1005") /* 显示模式： */}</span>
            <RadioGroup
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.value,
                  "fieldConstraint",
                  "withCode"
                )
              }
              value={Boolean(
                this.getInitialValue("fieldConstraint", "withCode")
              )}
            >
              <Radio value={false}>
                {messages("components.key10") /* 名称 */}
              </Radio>
              <Radio value>
                {messages("components.key1006") /* 编码 + 名称 */}
              </Radio>
            </RadioGroup>
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  !e.target.checked,
                  "fieldConstraint",
                  "withoutDefaultValue"
                )
              }
              checked={
                !this.getInitialValue("fieldConstraint", "withoutDefaultValue")
              }
            >
              {" "}
              {messages("components.key568" /* 带出默认值 */)}
              <span className="default-span">
                {messages(
                  "components.key569" /* 勾选后，新建单据时成本中心带出默认值 */
                )}
              </span>
            </Checkbox>
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "isApportionItem"
                )
              }
              checked={this.getInitialValue(
                "fieldConstraint",
                "isApportionItem"
              )}
            >
              {messages("components.key578" /* 参与费用分摊 */)}
            </Checkbox>
          </div>
        )}
        <div className="form-title">
          {messages("components.key570" /* 选择成本中心 */)}
        </div>
        <Select
          disabled={disabled}
          onChange={(value) =>
            this.handleChangeAttr(value, "dataSource", "costCenterOID")
          }
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          value={currentOID}
        >
          {costCenterData.map((item) => (
            <Option key={item.costCenterOID}>{item.name}</Option>
          ))}
        </Select>
      </div>
    );
  };

  renderLinkageCostCenter = () => {
    const { widget, linkageCostCenters } = this.state;
    const { nowWidgetList, isFormDesign, disabled, showConfig } = this.props;
    // 处理成本中心
    const selectedOIDList = [];
    let currentOID = this.getInitialValue("dataSource", "costCenterOID");
    let currentSubOID = this.getInitialValue("dataSource", "subCostCenterOID");
    nowWidgetList.map((singleWidget) => {
      if (
        singleWidget.messageKey === "linkage_cost_center" &&
        singleWidget.dataSource
      ) {
        selectedOIDList.push(JSON.parse(singleWidget.dataSource).costCenterOID);
      }
    });
    const costCenterData = [];
    const subCostCenterList = [];
    let isHasCurrentOID = false; // 之前选择的成本中心是否还存在，如果不存在了，则要清除
    linkageCostCenters.data &&
      linkageCostCenters.data.map((singleCostCenterField) => {
        if (
          selectedOIDList.indexOf(singleCostCenterField.costCenterOID) == -1 ||
          singleCostCenterField.costCenterOID === currentOID
        ) {
          costCenterData.push(singleCostCenterField);
        }
        if (singleCostCenterField.costCenterOID === currentOID) {
          isHasCurrentOID = true;
          if (singleCostCenterField.childCostCenterOID === currentSubOID) {
            subCostCenterList.push({
              subCostCenterOID: singleCostCenterField.childCostCenterOID,
              name: singleCostCenterField.childCostCenterName,
            });
          }
        }
      });
    if (!isHasCurrentOID) {
      currentOID = "";
      currentSubOID = "";
    }
    // 处理核算
    const adjustScopeData = widget.adjustScopeList
      ? JSON.parse(JSON.stringify(widget.adjustScopeList))
      : [];
    // 把子级已选加到可选范围
    if (widget.subLedEnabled && widget.subLedOrmKey) {
      widget.adjustScopeListAll.map((item) => {
        if (item.id === widget.subLedOrmKey) {
          adjustScopeData.push(item);
        }
      });
    }
    // 把父级已选从可选范围中移除
    if (widget.ledEnabled && widget.ledOrmKey) {
      let spliceIndex = -1;
      adjustScopeData.map((item, index) => {
        if (item.id === widget.ledOrmKey) {
          spliceIndex = index;
        }
      });
      if (spliceIndex > -1) {
        adjustScopeData.splice(spliceIndex, 1);
      }
    }
    return (
      <div>
        <div className="check-box-area">
          <span>{messages("components.key1005") /* 显示模式： */}</span>
          <RadioGroup
            disabled={disabled}
            onChange={(e) =>
              this.handleChangeAttr(
                e.target.value,
                "fieldConstraint",
                "withCode"
              )
            }
            value={Boolean(this.getInitialValue("fieldConstraint", "withCode"))}
          >
            <Radio value={false}>
              {messages("components.key10") /* 名称 */}
            </Radio>
            <Radio value>
              {messages("components.key1006") /* 编码 + 名称 */}
            </Radio>
          </RadioGroup>
          <Checkbox
            disabled={disabled}
            onChange={(e) =>
              this.handleChangeAttr(
                e.target.checked,
                "fieldConstraint",
                "withDefaultValue"
              )
            }
            checked={this.getInitialValue(
              "fieldConstraint",
              "withDefaultValue"
            )}
          >
            {" "}
            {messages("components.key568" /* 带出默认值 */)}
            <span className="default-span">
              {messages(
                "components.key569" /* 勾选后，新建单据时成本中心带出默认值 */
              )}
            </span>
          </Checkbox>
          <Checkbox
            disabled={disabled}
            onChange={(e) =>
              this.handleChangeAttr(
                e.target.checked,
                "fieldConstraint",
                "isApportionItem"
              )
            }
            checked={this.getInitialValue("fieldConstraint", "isApportionItem")}
          >
            {messages("components.key578" /* 参与费用分摊 */)}
          </Checkbox>
        </div>
        <div className="form-title">
          {messages("components.key570" /* 选择成本中心 */)}
        </div>
        <Select
          disabled={disabled}
          onChange={(value) =>
            this.handleChangeAttr(
              value,
              "dataSource",
              "costCenterOID",
              "linkage_cost_center"
            )
          }
          placeholder={messages("common.please.select")}
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          value={currentOID || undefined}
        >
          {costCenterData.map((item) => (
            <Option key={item.costCenterOID}>{item.name}</Option>
          ))}
        </Select>
        <div className="form-title">
          {messages("components.key711") /* 下级成本中心标题 */}
        </div>
        <LanguageInput
          nameChange={(value, i18n) =>
            this.handleSubLanguageInput(value, i18n, "subFieldName")
          }
          width="100%"
          name={widget.subFieldName}
          isEdit
          inpRule={this.getInpRule(100)}
          mainLanguageIsRequired={false}
          disabled={disabled}
          i18nName={widget.subFieldNameI18n}
        />
        <div className="form-title">
          {messages("components.key723") /* 下级成本中心提示文字 */}
        </div>
        <LanguageInput
          nameChange={(value, i18n) =>
            this.handleSubLanguageInput(value, i18n, "subPromptInfo")
          }
          width="100%"
          name={widget.subPromptInfo}
          isEdit
          inpRule={this.getInpRule(100)}
          mainLanguageIsRequired={false}
          disabled={disabled}
          i18nName={widget.subPromptInfoI18n}
        />
        {isFormDesign && (
          <div>
            <div className="form-title">
              {messages("components.key809") /* 控件编码 */}
            </div>
            <Input
              placeholder={messages("common.please.enter") /* 请输入 */}
              value={widget.subFieldCode}
              onChange={(e) =>
                this.handleComboFieldCode(e.target.value, "subFieldCode")
              }
            />
          </div>
        )}

        {showConfig.ledEnabled && (
          <div className="check-box-area">
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChange(e.target.checked, "subLedEnabled")
              }
              checked={widget.subLedEnabled}
            >
              {" "}
              {messages("components.key843") /* 参与核算 */}
            </Checkbox>
          </div>
        )}
        {widget.subLedEnabled && (
          <Select
            disabled={disabled}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
            onChange={(value) => this.handleChange(value, "subLedOrmKey")}
            value={widget.subLedOrmKey ? widget.subLedOrmKey : undefined}
            placeholder={messages("common.please.select") /* 请选择 */}
          >
            {adjustScopeData &&
              adjustScopeData.map((item) => (
                <Option key={item.id}>{item.segmentName}</Option>
              ))}
          </Select>
        )}

        <div className="check-box-area">
          <span>{messages("components.key1005") /* 显示模式： */}</span>
          <RadioGroup
            disabled={disabled}
            onChange={(e) => this.handleChange(e.target.value, "subWithCode")}
            value={Boolean(widget.subWithCode)}
          >
            <Radio value={false}>
              {messages("components.key10") /* 名称 */}
            </Radio>
            <Radio value>
              {messages("components.key1006") /* 编码 + 名称 */}
            </Radio>
          </RadioGroup>
          <Checkbox disabled checked={false}>
            {" "}
            {messages("components.key568" /* 带出默认值 */)}
          </Checkbox>
        </div>
        <div className="form-title">
          {messages("components.key713") /* 选择下级成本中心 */}
        </div>
        <Select
          disabled
          placeholder={messages("common.please.select")}
          value={currentSubOID || undefined}
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
        >
          {subCostCenterList.map((item) => (
            <Option key={item.subCostCenterOID}>{item.name}</Option>
          ))}
        </Select>
      </div>
    );
  };

  updateWidget(widget, widgetList) {
    if (
      widget &&
      widget.messageKey === "form.description" &&
      this.state.widget.messageKey !== "form.description"
    ) {
      // 拼装description控件的i18n数组
      const titleI18n = [];
      const contentI18n = [];
      Object.keys(widget).map((key) => {
        this.props.languageList.map((language) => {
          if (key === language.code.toLowerCase()) {
            titleI18n.push({ language: key, value: widget[key].title });
            contentI18n.push({ language: key, value: widget[key].content });
          }
        });
      });
      widget.titleI18n = titleI18n;
      widget.contentI18n = contentI18n;
      this.props.onChange(widget);
      this.setState({ widget, baseWidget: null });
    } else if (widget) {
      let baseWidget = null;
      this.props.needType &&
        widgetList &&
        widgetList.map((item) => {
          if (item.messageKey === widget.messageKey) baseWidget = item;
        });
      if (widget.messageKey === "select_participant") {
        if (!widget.participantsImportScope) {
          widget.participantsImportScope = "1";
        }
        if (!widget.fieldContent) {
          widget.fieldContent =
            '{"isUse":true,"out":false,"outParticipant":1,"innerParticipant":"1","editable":true}';
        }
      }
      if (widget.messageKey === "select_approver" && !widget.fieldContent) {
        widget.fieldContent = '{"countersignTypeForSubmitter": 2}';
      }
      if (
        [
          "select_department",
          "select_cost_center",
          "linkage_cost_center",
        ].indexOf(widget.messageKey) > -1
      ) {
        if (!widget.fieldConstraint) {
          widget.fieldConstraint = '{"isApportionItem": true}';
        } else if (
          JSON.parse(widget.fieldConstraint) &&
          JSON.parse(widget.fieldConstraint).isApportionItem === undefined
        ) {
          const fieldConstraint = JSON.parse(widget.fieldConstraint);
          fieldConstraint.isApportionItem = true;
          widget.fieldConstraint = JSON.stringify(fieldConstraint);
        }
      }
      // 新加入的组件，组装成需要的结构
      const { valueKey } = this.props;
      if (
        !widget.customFormFieldI18nDTOS ||
        widget.customFormFieldI18nDTOS.length === 0
      ) {
        widget.fieldName = widget.name;
        widget.promptInfo = widget.promptInfo;
        widget.fieldConstraint = widget.constraintRule;
        widget.i18n = widget.i18n ? widget.i18n : {};
        widget.valid = true;
        if (widget.messageKey === "cust_list") {
          widget.type = "0";
        } else {
          widget.type = null;
        }
        if (widget.messageKey === "linkage_cost_center") {
          widget.required = true;
        } else {
          widget.required = false;
        }
        widget.dataSource = "";
        // customFormFieldI18nDTOS供联动开关使用
        widget.customFormFieldI18nDTOS = [];
        this.props.languageList.map((language) => {
          const i18nDTO = {
            fieldName: widget.name,
            promptInfo: "",
            language: language.code,
          };
          widget.customFormFieldI18nDTOS.push(i18nDTO);
        });
      }

      if (!widget.fieldNameI18n) {
        if (!widget.i18n || !widget.i18n.fieldName) {
          if (widget.i18n && widget.i18n.name) {
            widget.fieldNameI18n = widget.i18n.name;
          } else {
            const fieldNameI18n = [];
            this.props.languageList.map((language) => {
              const i18nDTO = {
                language: language.code,
                value: widget.name,
              };
              fieldNameI18n.push(i18nDTO);
            });
            widget.fieldNameI18n = fieldNameI18n;
          }
        } else {
          widget.fieldNameI18n = widget.i18n.fieldName;
        }
      }

      if (!widget.promptInfoI18n) {
        if (!widget.i18n || !widget.i18n.promptInfo) {
          const promptInfoI18n = [];
          this.props.languageList.map((language) => {
            const i18nDTO = {
              language: language.code,
              value: "",
            };
            promptInfoI18n.push(i18nDTO);
          });
          widget.promptInfoI18n = promptInfoI18n;
        } else {
          widget.promptInfoI18n = widget.i18n.promptInfo;
        }
      }

      if (this.state.widget[valueKey] !== widget[valueKey]) {
        switch (widget.messageKey) {
          case "cust_list":
          case "more_cust_list":
          case "linkage_switch":
            this.getDataBeforeRender("enumerations");
            break;
          case "select_cost_center":
            this.getDataBeforeRender("costCenters");
            break;
          case "linkage_cost_center":
            this.getDataBeforeRender("linkageCostCenters");
            break;
          case "employee_expand":
            this.getDataBeforeRender("companyFields");
            break;
        }
        // 拼装表单名称、备注的i18n数组

        const outFieldNameI18n = [];
        const outPromptInfoI18n = [];
        if (widget.messageKey === "select_participant") {
          // 新拖拽一个的时候
          if (
            !widget.outCustomFormFieldI18nDTOS ||
            widget.outCustomFormFieldI18nDTOS.length === 0
          ) {
            widget.outCustomFormFieldI18nDTOS = [];
            this.props.languageList.map((language) => {
              const i18nDTO = {
                fieldName: messages("components.key571" /* 外部参与人 */), // 外部参与人
                promptInfo: "",
                language: language.code,
              };
              widget.outCustomFormFieldI18nDTOS.push(i18nDTO);
            });
            if (!widget.outFieldName) {
              widget.outFieldName = messages(
                "components.key571" /* 外部参与人 */
              ); // 外部参与人
            }
            if (!widget.outPromptInfo) {
              widget.outPromptInfo = "";
            }
            widget.outCustomFormFieldI18nDTOS.map((i18nDTO) => {
              // 外部参与人数量
              outFieldNameI18n.push({
                language: i18nDTO.language,
                value: i18nDTO.fieldName,
              });
              outPromptInfoI18n.push({
                language: i18nDTO.language,
                value: i18nDTO.promptInfo,
              });
            });
            if (!widget.outFieldNameI18n) {
              widget.outFieldNameI18n = outFieldNameI18n;
            }
            if (!widget.outPromptInfoI18n) {
              widget.outPromptInfoI18n = outPromptInfoI18n;
            }
          }

          if (!widget.outFieldNameI18n) {
            widget.outFieldNameI18n = widget.outI18n.fieldName;
          }
          if (!widget.outPromptInfoI18n) {
            widget.outPromptInfoI18n = widget.outI18n.promptInfo;
          }
        }

        const bankFieldNameI18n = [];
        const bankPromptInfoI18n = [];
        if (widget.messageKey === "payee") {
          if (
            !widget.bankCustomFormFieldI18nDTOS ||
            widget.bankCustomFormFieldI18nDTOS.length === 0
          ) {
            widget.bankCustomFormFieldI18nDTOS = [];
            this.props.languageList.map((language) => {
              const i18nDTO = {
                fieldName: messages("components.key572" /* 银行卡号 */), // 银行卡号
                promptInfo: "",
                language: language.code,
              };
              widget.bankCustomFormFieldI18nDTOS.push(i18nDTO);
            });
            if (!widget.bankFieldName) {
              widget.bankFieldName = messages(
                "components.key572" /* 银行卡号 */
              ); // 银行卡号
            }
            widget.bankCustomFormFieldI18nDTOS.map((i18nDTO) => {
              bankFieldNameI18n.push({
                language: i18nDTO.language,
                value: i18nDTO.fieldName,
              });
              bankPromptInfoI18n.push({
                language: i18nDTO.language,
                value: i18nDTO.promptInfo,
              });
            });
            if (!widget.bankFieldNameI18n) {
              widget.bankFieldNameI18n = bankFieldNameI18n;
            }
            if (!widget.bankPromptInfoI18n) {
              if (widget.i18n && widget.i18n.promptInfo) {
                widget.bankPromptInfoI18n = JSON.parse(
                  JSON.stringify(widget.i18n.promptInfo)
                );
              } else {
                widget.bankPromptInfoI18n = bankPromptInfoI18n;
              }
            }
          }
          if (!widget.bankFieldNameI18n) {
            widget.bankFieldNameI18n = widget.bankI18n.fieldName;
          }
          if (!widget.bankPromptInfoI18n) {
            widget.bankPromptInfoI18n = widget.bankI18n.promptInfo;
          }
        }

        let subFieldNameI18n = [];
        let subPromptInfoI18n = [];
        let subFieldName = messages("components.key714"); /* 下级成本中心 */
        let subPromptInfo = widget.promptInfo ? widget.promptInfo : "";
        if (widget.messageKey === "linkage_cost_center") {
          const linkageCostCenter = widget.fieldContent
            ? JSON.parse(widget.fieldContent)
            : [];
          if (linkageCostCenter.length > 0) {
            // 编辑中初始化
            subFieldNameI18n = linkageCostCenter[0].fieldNameI18n;
            subFieldNameI18n &&
              subFieldNameI18n.map((fieldI18n) => {
                if (
                  fieldI18n.language.toLowerCase() === this.props.language.code
                ) {
                  subFieldName = fieldI18n.value;
                }
              });
            subPromptInfoI18n = linkageCostCenter[0].promptInfoI18n;
            subPromptInfoI18n &&
              subPromptInfoI18n.map((promptI18n) => {
                if (
                  promptI18n.language.toLowerCase() === this.props.language.code
                ) {
                  subPromptInfo = promptI18n.value;
                }
              });
          } else {
            // 新拖拽初始化
            this.props.languageList.map((language) => {
              const i18nDTO = {
                fieldName: messages("components.key714") /* 下级成本中心 */,
                promptInfo: "",
                language: language.code,
              };
              subFieldNameI18n.push({
                language: language.code,
                value: messages("components.key714") /* 下级成本中心 */,
              });
              subPromptInfoI18n.push({ language: language.code, value: "" });
            });
            if (widget.i18n && widget.i18n.promptInfo) {
              subPromptInfoI18n = JSON.parse(
                JSON.stringify(widget.i18n.promptInfo)
              );
            }
          }
          if (!widget.subFieldName) {
            widget.subFieldName = subFieldName;
          }
          if (!widget.subPromptInfo) {
            widget.subPromptInfo = subPromptInfo;
          }
          if (!widget.subFieldNameI18n) {
            widget.subFieldNameI18n = subFieldNameI18n;
          }
          if (!widget.subPromptInfoI18n) {
            widget.subPromptInfoI18n = subPromptInfoI18n;
          }
        }

        if (widget.messageKey === "linkage_switch") {
          widget.maxChildNum = widget.fieldConstraint
            ? JSON.parse(widget.fieldConstraint).maxChildNum
            : -1;
          widget.linkageSwitchItems = widget.fieldContent
            ? JSON.parse(widget.fieldContent)
            : [];
          widget.linkageSwitchItems.map((linkageSwitchItem) => {
            if (!linkageSwitchItem.fieldNameI18n) {
              linkageSwitchItem.fieldNameI18n = [];
            }
            if (!linkageSwitchItem.promptInfoI18n) {
              linkageSwitchItem.promptInfoI18n = [];
            }
          });

          widget.customFormFieldI18nDTOS &&
            widget.customFormFieldI18nDTOS.map((i18nDTO) => {
              if (!i18nDTO.fieldContent) {
                i18nDTO.fieldContent = widget.fieldContent;
              }
            });
        }

        // 选择框控件默认封装三个对象
        if (widget.messageKey === "select_box") {
          const optionList = [];
          for (let i = 0; i < 3; i++) {
            optionList.push({
              id: randomString(8),
              name: null,
              promoptInfo: null,
            });
          }
          widget.fieldConstraint =
            widget.fieldConstraint && widget.fieldConstraint !== ""
              ? widget.fieldConstraint
              : JSON.stringify({ type: "0" });
          widget.optionList =
            widget.fieldContent && JSON.parse(widget.fieldContent)[0].id === ""
              ? optionList
              : JSON.parse(widget.fieldContent);
        }
        // 开始结束日期默认值
        if (
          widget.messageKey === "start_date" ||
          widget.messageKey === "end_date"
        ) {
          widget.fieldConstraint =
            widget.fieldConstraint && widget.fieldConstraint !== ""
              ? widget.fieldConstraint
              : JSON.stringify({ enableTime: false, defaultTime: null });
        }
        this.props.onChange(widget);
        this.setState({ widget, baseWidget });
      }
      setTimeout(() => this.setState({ refreshLinkage: false }), 10); // 联动开关重新渲染需要延时
    } else if (!widget) {
      this.setState({ widget: {}, baseWidget: null });
    }
  }

  componentWillReceiveProps(nextProps) {
    const { widget, widgetList } = nextProps;
    this.updateWidget(widget, widgetList);
  }

  handleLanguageInput = (value, i18n, attr) => {
    const { widget } = this.state;
    widget[attr] = value;
    widget[`${attr}I18n`] = i18n;
    this.props.onChange(widget);
  };

  // 扩展字段类型添加 code
  // 表单管理的添加 code也在这处理
  handleFieldCode = (value, attr) => {
    const { widget } = this.state;
    widget.fieldCode = value;
    this.props.onChange(widget);
  };

  // 带有从属的控件中的子控件的fieldCode在这处理
  handleComboFieldCode = (value, key) => {
    const { widget } = this.state;
    widget[key] = value;
    this.props.onChange(widget);
  };

  handleChange = (value, attr) => {
    const { widget } = this.state;
    widget[attr] = value;
    if (attr === "reportShow" && !value) {
      widget.reportOrmKey = "";
    }
    if (attr === "ledEnabled" && !value) {
      widget.ledOrmKey = "";
    }
    if (attr === "subLedEnabled" && !value) {
      widget.subLedOrmKey = "";
    }
    if (
      attr === "isReadOnly" &&
      (widget.messageKey === "select_department" ||
        widget.messageKey === "select_cost_center" ||
        widget.messageKey === "common.date" ||
        widget.messageKey === "input")
    ) {
      this.handleChangeAttr(value, "fieldConstraint", "valueReadonly");
    }
    this.props.onChange(widget);
  };

  renderCustomWidget = (field) => {
    const {
      widget,
      enumerations,
      costCenters,
      companyFields,
      refreshLinkage,
    } = this.state;
    const { isFormDesign, formType, disabled, valueListDisabled } = this.props;
    switch (widget.messageKey) {
      case "cust_list":
      case "more_cust_list": {
        if (field.fieldCode === "heliosspc_remark_control") {
          /*
           * 需求 6928 这种值列表后端写死的，前端通过 匹配值列表，不需要用户选择
           * 后端给一个写死的值列表类型 systemCustomEnumerationType
           * 前端获取之后，通过 systemCustomEnumerationType 去在值列表中找 customEnumerationOID
           * 找到之后，放到写死的值列表里面
           * */
          return <div />;
        }
        return (
          <div>
            <div className="form-title">
              {messages("components.key564" /* 选择列表 */)}
            </div>
            <Select
              disabled={disabled || valueListDisabled}
              onChange={(value) =>
                this.handleChangeAttr(
                  value,
                  "dataSource",
                  "customEnumerationOID"
                )
              }
              value={this.getInitialValue("dataSource", "customEnumerationOID")}
              getPopupContainer={(triggerNode) => triggerNode.parentNode}
            >
              {enumerations.data.map((item) => (
                <Option key={item.customEnumerationOID}>{item.name}</Option>
              ))}
            </Select>
          </div>
        );
      }
      case "number": {
        return (
          <div>
            <div className="form-title">
              {messages("components.key573" /* 整数位数 */)}
            </div>
            <InputNumber
              disabled={disabled || valueListDisabled}
              max={15}
              min={1}
              precision={0}
              value={this.getInitialValue(
                "fieldConstraint",
                "integerMaxLength"
              )}
              onChange={(value) =>
                this.handleChangeAttr(
                  value,
                  "fieldConstraint",
                  "integerMaxLength"
                )
              }
            />
            <div className="form-title">
              {messages("components.key574" /* 小数位数 */)}
            </div>
            <InputNumber
              disabled={disabled || valueListDisabled}
              max={10}
              min={0}
              precision={0}
              value={this.getInitialValue(
                "fieldConstraint",
                "decimalMaxLength"
              )}
              onChange={(value) =>
                this.handleChangeAttr(
                  value,
                  "fieldConstraint",
                  "decimalMaxLength"
                )
              }
            />
            <div className="form-title">
              {messages("components.key575" /* 单位 */)}
            </div>
            <LanguageInput
              nameChange={(value, i18n) =>
                this.handleInputUnitValue(value, i18n)
              }
              width="100%"
              name={this.getInitialValue("fieldContent", "unit")}
              isEdit
              inpRule={this.getInpRule(100)}
              mainLanguageIsRequired={false}
              disabled={disabled}
              i18nName={this.getInitialValue("fieldContent", "unitI18n")}
            />
          </div>
        );
      }
      case "attachment":
      case "image": {
        return (
          <div>
            <div className="form-title">
              {messages("components.key576" /* 最多上传数量 */)}
            </div>
            <InputNumber
              disabled={disabled}
              max={widget.messageKey === "image" ? 10 : 100}
              min={1}
              precision={0}
              value={this.getInitialValue("fieldConstraint", "maxNumber")}
              onChange={(value) =>
                this.handleChangeAttr(value, "fieldConstraint", "maxNumber")
              }
            />
          </div>
        );
      }
      case "select_department": {
        return (
          <div className="check-box-area">
            <span>{messages("components.key1005") /* 显示模式： */}</span>
            <RadioGroup
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.value,
                  "fieldConstraint",
                  "withCode"
                )
              }
              value={Boolean(
                this.getInitialValue("fieldConstraint", "withCode")
              )}
            >
              <Radio value={false}>
                {messages("components.key10") /* 名称 */}
              </Radio>
              <Radio value>
                {messages("components.key1006") /* 编码 + 名称 */}
              </Radio>
            </RadioGroup>
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked ? 101 : false,
                  "fieldConstraint",
                  "selectMode"
                )
              }
              checked={Boolean(
                this.getInitialValue("fieldConstraint", "selectMode")
              )}
            >
              {messages("components.key577" /* 默认自己所在部门 */)}
            </Checkbox>
            {isFormDesign && (
              <Checkbox
                disabled={disabled}
                onChange={(e) =>
                  this.handleChangeAttr(
                    e.target.checked,
                    "fieldConstraint",
                    "isApportionItem"
                  )
                }
                checked={this.getInitialValue(
                  "fieldConstraint",
                  "isApportionItem"
                )}
              >
                {messages("components.key578" /* 参与费用分摊 */)}
              </Checkbox>
            )}
            {!isFormDesign && (
              <Checkbox
                disabled={disabled}
                onChange={(e) =>
                  this.handleChangeAttr(
                    e.target.checked,
                    "fieldConstraint",
                    "isApportionItem"
                  )
                }
                checked={this.getInitialValue(
                  "fieldConstraint",
                  "isApportionItem"
                )}
              >
                {messages("components.key578" /* 参与费用分摊 */)}
              </Checkbox>
            )}
          </div>
        );
      }
      case "currency_code": {
        return (
          <div className="form-title">
            <div className="form-title-description">
              {messages(
                "components.key579" /* 可选币种来源：【设置- 货币】中的设置，默认为本位币 */
              )}
            </div>
          </div>
        );
      }
      case "select_cost_center": {
        return this.renderCostCenter();
      }
      case "linkage_cost_center": {
        return this.renderLinkageCostCenter();
      }
      case "employee_expand": {
        return this.renderEmployeeExpand();
      }
      case "select_user": {
        return (
          <div className="radio-area">
            <RadioGroup
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.value,
                  "fieldConstraint",
                  "selectMode"
                )
              }
              value={Number(
                Boolean(this.getInitialValue("fieldConstraint", "selectMode"))
              )}
            >
              <Radio value={0}>
                {messages("components.key580" /* 单选 */)}
              </Radio>
              <Radio value={1}>
                {messages("components.key581" /* 多选 */)}
              </Radio>
            </RadioGroup>
          </div>
        );
      }
      case "external_participant_name": {
        return (
          <div className="radio-area">
            <RadioGroup
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.value,
                  "fieldContent",
                  "isContainCard"
                )
              }
              value={Boolean(
                this.getInitialValue("fieldContent", "isContainCard")
              )}
            >
              <Radio value={false}>
                {messages("components.key582" /* 姓名 */)}
              </Radio>
              <Radio value>
                {messages("components.key583" /* 姓名+证件 */)}
              </Radio>
            </RadioGroup>
          </div>
        );
      }
      case "select_corporation_entity": {
        return (
          <div className="check-box-area">
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "default"
                )
              }
              checked={this.getInitialValue("fieldConstraint", "default")}
            >
              {messages("components.key584" /* 默认申请人所在法人 */)}
            </Checkbox>
          </div>
        );
      }
      case "budget_detail": {
        return (
          <div className="check-box-area">
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldContent",
                  "hideCompanyPay"
                )
              }
              checked={this.getInitialValue("fieldContent", "hideCompanyPay")}
            >
              {" "}
              {messages("components.key961") /* 不显示[公司支付] */}
            </Checkbox>
          </div>
        );
      }
      case "select_company": {
        return (
          <div className="check-box-area">
            <Checkbox
              disabled={
                disabled ||
                this.getInitialValue("fieldConstraint", "notUnionCompany")
              }
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "unionCompany"
                )
              }
              checked={this.getInitialValue("fieldConstraint", "unionCompany")}
            >
              {messages(
                "mcd.setting.formSetting.unionCompany" /* 费用承担公司（工会公司） */
              )}
            </Checkbox>
            <Checkbox
              disabled={
                disabled ||
                this.getInitialValue("fieldConstraint", "unionCompany")
              }
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "notUnionCompany"
                )
              }
              checked={this.getInitialValue(
                "fieldConstraint",
                "notUnionCompany"
              )}
            >
              {messages(
                "mcd.setting.formSetting.notUnionCompany" /* 费用承担公司（非工会公司） */
              )}
            </Checkbox>
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "showCode"
                )
              }
              checked={this.getInitialValue("fieldConstraint", "showCode")}
            >
              {messages("components.key585" /* 显示公司代码 */)}
            </Checkbox>
            <Checkbox
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(
                  !e.target.checked,
                  "fieldConstraint",
                  "noDefault"
                )
              }
              checked={!this.getInitialValue("fieldConstraint", "noDefault")}
            >
              {messages("components.key586" /* 默认申请人所在公司 */)}
            </Checkbox>
            <Checkbox
              disabled={disabled || this.checkWidgetDisabled("isGroup")}
              onChange={(e) =>
                this.handleChangeAttr(
                  e.target.checked,
                  "fieldConstraint",
                  "isGroup"
                )
              }
              checked={this.getInitialValue("fieldConstraint", "isGroup")}
            >
              {messages("components.key768") /* 选择指定范围 */}
              <span className="default-span">
                {" "}
                {
                  messages(
                    "components.key811"
                  ) /* 只能选择申请人公司所在公司组里的公司 */
                }
              </span>
            </Checkbox>
          </div>
        );
      }
      case "payee": {
        return (
          <div>
            <div className="form-title">
              {messages("components.key587" /* 银行卡号标题 */)}
            </div>
            <LanguageInput
              nameChange={(value, i18n) =>
                this.handleSubLanguageInput(
                  value,
                  i18n,
                  "bankFieldName",
                  "fieldName"
                )
              }
              width="100%"
              name={widget.bankFieldName}
              isEdit
              inpRule={[
                {
                  length: 100,
                  language: "zh_cn",
                },
                {
                  length: 100,
                  language: "en",
                },
              ]}
              mainLanguageIsRequired={false}
              disabled={disabled}
              i18nName={widget.bankFieldNameI18n}
            />
            <div className="form-title">
              {messages("components.key588" /* 银行卡号文字 */)}
            </div>
            <LanguageInput
              nameChange={(value, i18n) =>
                this.handleSubLanguageInput(
                  value,
                  i18n,
                  "bankPromptInfo",
                  "promptInfo"
                )
              }
              width="100%"
              name={widget.bankPromptInfo}
              isEdit
              inpRule={[
                {
                  length: 100,
                  language: "zh_cn",
                },
                {
                  length: 100,
                  language: "en",
                },
              ]}
              mainLanguageIsRequired={false}
              disabled={disabled}
              i18nName={widget.bankPromptInfoI18n}
            />
            {isFormDesign && (
              <div>
                <div className="form-title">
                  {messages("components.key809") /* 控件编码 */}
                </div>
                <Input
                  placeholder={messages("common.please.enter") /* 请输入 */}
                  value={widget.bankFieldCode}
                  onChange={(e) =>
                    this.handleComboFieldCode(e.target.value, "bankFieldCode")
                  }
                />
              </div>
            )}
          </div>
        );
      }
      case "select_approver": {
        return (
          <div>
            <div className="checkbox-radio-area">
              <div className="form-title">
                {messages("components.key827") /* 模式 */}
              </div>
              <RadioGroup
                disabled={disabled}
                value={this.getInitialValue(
                  "fieldContent",
                  "countersignTypeForSubmitter"
                )}
                onChange={(e) =>
                  this.handleChangeAttr(
                    e.target.value,
                    "fieldContent",
                    "countersignTypeForSubmitter"
                  )
                }
              >
                <Radio value={2}>
                  {messages("components.key828") /* 按顺序全部审批后通过 */}
                </Radio>
                <Radio value={1}>
                  {messages("components.key829") /* 任意人审批通过 */}
                </Radio>
              </RadioGroup>
            </div>
          </div>
        );
      }
      case "select_participant": {
        return (
          <div>
            <div className="checkbox-radio-area">
              {this.getInitialValue("fieldContent", "isUse") && (
                <div>
                  <div className="form-title">
                    {messages("components.key593" /* 参与人控件安全性设置 */)}
                  </div>
                  <RadioGroup
                    disabled={disabled}
                    value={widget.participantsImportScope}
                    onChange={this.handleChangeParticipantsImportScope}
                  >
                    <Radio value="99">
                      {messages("components.key816") /* 同申请人 */}
                    </Radio>
                    <Radio value="7">
                      {messages("components.key812") /* 同申请人账套 */}
                    </Radio>
                    <Radio value="1">
                      {messages("components.key594" /* 同申请人公司 */)}
                    </Radio>
                    <Radio value="2">
                      {messages("components.key595" /* 同申请人部门 */)}
                    </Radio>
                    <Radio value="3">
                      {messages(
                        "components.key596" /* 同申请人部门(含子部门) */
                      )}
                    </Radio>
                    <Radio value="4">
                      {messages("components.key597" /* 同单据部门 */)}
                    </Radio>
                    <Radio value="5">
                      {messages("components.key598" /* 同单据部门(含子部门) */)}
                    </Radio>
                    <Radio value="6">
                      {messages("components.key599" /* 同单据成本中心 */)}
                    </Radio>
                  </RadioGroup>
                </div>
              )}

              <Checkbox
                style={{ marginTop: 16 }}
                disabled={disabled}
                onChange={(e) =>
                  this.handleChangeAttr(e.target.checked, "fieldContent", "out")
                }
                checked={this.getInitialValue("fieldContent", "out")}
              >
                {messages("components.key600" /* 启用【外部】参与人控件 */)}
              </Checkbox>
              {this.getInitialValue("fieldContent", "out") && (
                <div>
                  <RadioGroup
                    disabled={disabled}
                    value={this.getInitialValue(
                      "fieldContent",
                      "outParticipant"
                    )}
                  >
                    <Radio value={1}>
                      {messages("components.key601" /* 数量 */)}
                    </Radio>
                  </RadioGroup>
                  <div className="form-title">
                    {messages("components.key602" /* 外部标题 */)}
                  </div>
                  <LanguageInput
                    nameChange={(value, i18n) =>
                      this.handleSubLanguageInput(
                        value,
                        i18n,
                        "outFieldName",
                        "fieldName"
                      )
                    }
                    width="100%"
                    name={widget.outFieldName}
                    isEdit
                    inpRule={[
                      {
                        length: 100,
                        language: "zh_cn",
                      },
                      {
                        length: 100,
                        language: "en",
                      },
                    ]}
                    mainLanguageIsRequired={false}
                    disabled={disabled}
                    i18nName={widget.outFieldNameI18n}
                  />
                  <div className="form-title">
                    {messages("components.key603" /* 外部提示文字 */)}
                  </div>
                  <LanguageInput
                    nameChange={(value, i18n) =>
                      this.handleSubLanguageInput(
                        value,
                        i18n,
                        "outPromptInfo",
                        "promptInfo"
                      )
                    }
                    width="100%"
                    name={widget.outPromptInfo}
                    isEdit
                    inpRule={[
                      {
                        length: 100,
                        language: "zh_cn",
                      },
                      {
                        length: 100,
                        language: "en",
                      },
                    ]}
                    mainLanguageIsRequired={false}
                    disabled={disabled}
                    i18nName={widget.outPromptInfoI18n}
                  />
                  {isFormDesign && (
                    <div>
                      <div className="form-title">
                        {messages("components.key809") /* 控件编码 */}
                      </div>
                      <Input
                        placeholder={
                          messages("common.please.enter") /* 请输入 */
                        }
                        value={widget.outFieldCode}
                        onChange={(e) =>
                          this.handleComboFieldCode(
                            e.target.value,
                            "outFieldCode"
                          )
                        }
                      />
                    </div>
                  )}
                  <div className="check-box-area">
                    <Checkbox
                      disabled={disabled}
                      onChange={(e) =>
                        this.handleChange(e.target.checked, "outRequired")
                      }
                      checked={widget.outRequired}
                    >
                      {messages("components.key563" /* 必填 */)}
                    </Checkbox>
                    <Checkbox
                      disabled={disabled}
                      onChange={(e) =>
                        this.handleChange(e.target.checked, "outIsPDFShow")
                      }
                      checked={widget.outIsPDFShow}
                    >
                      {messages("components.key604" /* 参与打印 */)}
                    </Checkbox>
                  </div>
                </div>
              )}
            </div>
          </div>
        );
      }
      case "linkage_switch": {
        return (
          <div className="linkage-switch-area">
            {!refreshLinkage &&
              widget.linkageSwitchItems.map((item, index) => (
                <LinkageSwitchItem
                  enumerations={enumerations}
                  item={item}
                  key={index}
                  onDelete={() => this.handleDeleteLinkageSwitchItem(index)}
                  onChange={(linkageSwitchItem) =>
                    this.handleChangeLinkageSwitchItem(linkageSwitchItem, index)
                  }
                />
              ))}
            <div
              className="new-linkage-switch-area"
              onClick={this.handleNewLinkageSwitchItem}
            >
              <Icon type="plus" />
              {messages("components.key605" /* 新增联动内容 */)}
            </div>
          </div>
        );
      }
      // 选择框组件功能完善
      case "select_box": {
        const selectNum =
          widget.fieldConstraint && widget.fieldConstraint !== ""
            ? JSON.parse(widget.fieldConstraint).type
            : "0";
        return (
          <div>
            <div className="radio-area">
              <RadioGroup
                disabled={disabled}
                onChange={(e) =>
                  this.handleChangeAttr(
                    e.target.value,
                    "fieldConstraint",
                    "type"
                  )
                }
                value={selectNum}
              >
                <Radio value="0">
                  {messages("components.key580" /* 单选 */)}
                </Radio>
                <Radio value="1">
                  {messages("components.key581" /* 多选 */)}
                </Radio>
              </RadioGroup>
            </div>
            <div>
              {widget.optionList.map((item, index) => (
                <Row key={item.id} type="flex" justify="center" align="middle">
                  <Col span={20} style={{ marginTop: "5px" }}>
                    <LanguageInput
                      nameChange={(value, i18n) =>
                        this.handleInputListValue(value, index, i18n)
                      }
                      placeholder={`${messages(
                        "components.key606" /* 选项 */
                      )}${index + 1}`}
                      width="100%"
                      name={item.name}
                      isEdit
                      inpRule={this.getInpRule(200)}
                      mainLanguageIsRequired={false}
                      disabled={disabled}
                      i18nName={item.nameI18n}
                    />
                  </Col>
                  <Col span={2} style={{ textAlign: "center" }}>
                    <Icon
                      className="dynamic-delete-button"
                      type="minus-circle-o"
                      style={{ fontSize: 16 }}
                      disabled={widget.optionList.length === 2}
                      onClick={() =>
                        this.handleInputListOperation("delete", index)
                      }
                    />
                  </Col>
                  <Col span={2} style={{ textAlign: "center" }}>
                    <Icon
                      type="plus-circle"
                      onClick={() => this.handleInputListOperation("add")}
                      className="default-color-font"
                      style={{ fontSize: 16 }}
                    />
                  </Col>
                </Row>
              ))}
            </div>
          </div>
        );
      }
      // 城市控件支持单选 多选 这个是新城市控件
      case "city": {
        const selectNum =
          widget.fieldContent && widget.fieldContent !== ""
            ? JSON.parse(widget.fieldContent).type
            : "0";
        return (
          <div className="radio-area">
            <RadioGroup
              disabled={disabled}
              onChange={(e) =>
                this.handleChangeAttr(e.target.value, "fieldContent", "type")
              }
              value={selectNum}
            >
              <Radio value="0">
                {messages("components.key580" /* 单选 */)}
              </Radio>
              <Radio value="1">
                {messages("components.key581" /* 多选 */)}
              </Radio>
            </RadioGroup>
          </div>
        );
      }
      case "prompt_key":
        const isOnlyShowInDetail =
          widget.fieldConstraint && widget.fieldConstraint !== ""
            ? !JSON.parse(widget.fieldConstraint).allShow
            : true;
        return (
          <div className="check-box-area">
            <Checkbox
              onChange={(e) =>
                this.handleChangeAttr(
                  !e.target.checked,
                  "fieldConstraint",
                  "allShow"
                )
              }
              checked={isOnlyShowInDetail}
            >
              {messages("components.key1081") /* 仅在编辑时展示 */}
            </Checkbox>
          </div>
        );
      // 开始日期结束日期完善
      case "start_date":
      case "end_date":
        const format = "HH:mm";
        const isShowTime =
          widget.fieldConstraint && widget.fieldConstraint !== ""
            ? JSON.parse(widget.fieldConstraint).enableTime
            : false;
        return (
          <div>
            <Row className="check-box-area">
              <Col span={8}>
                <Checkbox
                  onChange={(e) =>
                    this.handleChangeAttr(
                      e.target.checked,
                      "fieldConstraint",
                      "enableTime",
                      "start_end_date"
                    )
                  }
                  checked={isShowTime}
                >
                  {messages("components.key607" /* 启用时间 */)}
                </Checkbox>
              </Col>
              <Col>
                {isShowTime && (
                  <TimePicker
                    value={
                      this.getInitialValue("fieldConstraint", "defaultTime")
                        ? moment(
                            this.getInitialValue(
                              "fieldConstraint",
                              "defaultTime"
                            )
                          )
                        : null
                    }
                    allowEmpty={false}
                    format={format}
                    onChange={(time) =>
                      this.handleChangeAttr(
                        moment(time).second(0).utc().format(),
                        "fieldConstraint",
                        "defaultTime"
                      )
                    }
                  />
                )}
              </Col>
            </Row>
          </div>
        );
      case "public.assembly":
        return (
          <UnifiedTableConfig
            defaultValue={this.state.widget}
            onChange={this.handleNowSelectedWidgetConfigChange}
          ></UnifiedTableConfig>
        );
    }
    return null;
  };

  // 更新控件的config配置
  handleNowSelectedWidgetConfigChange = (partialConfig = {}) => {
    this.setState(({ widget }) => {
      return {
        widget: {
          ...widget,
          ...partialConfig
        }
      };
    }, () => {
      if (config.appEnv === 'dev') {
        // console.log('widget changed', this.state.widget);
      }
      this.props.onChange(this.state.widget);
    });
  }

  // 增减操作选择输入框
  handleInputListOperation = (type, index) => {
    const { widget } = this.state;
    if (type === "add") {
      widget.optionList.push({
        id: randomString(8),
        name: null,
        promoptInfo: null,
      });
    } else {
      if (widget.optionList.length === 2) return;
      widget.optionList.splice(index, 1);
    }
    widget.fieldContent = JSON.stringify(widget.optionList);
    this.props.onChange(widget);
  };

  // 选择框控件输入名称时的handle
  handleInputListValue = (value, index, i18n) => {
    const { widget } = this.state;
    widget.optionList[index].name = value;
    widget.optionList[index].nameI18n = i18n;
    widget.fieldContent = JSON.stringify(widget.optionList);
    this.props.onChange(widget);
  };

  // 数字控件输入单位时的handle
  handleInputUnitValue = (value, i18n) => {
    const { widget } = this.state;
    widget.fieldContent = JSON.stringify({
      unit: value,
      unitI18n: i18n,
    });
    this.props.onChange(widget);
  };

  handleChangeLinkageSwitchItem = (linkageSwitchItem, index) => {
    const { widget } = this.state;
    widget.linkageSwitchItems.splice(index, 1, linkageSwitchItem);
    const customFormFieldI18nDTOS = widget.customFormFieldI18nDTOS || [];
    customFormFieldI18nDTOS.map((i18nDTO) => {
      const fieldContent = i18nDTO.fieldContent
        ? JSON.parse(i18nDTO.fieldContent)
        : [];
      const newItem = JSON.parse(JSON.stringify(linkageSwitchItem));
      const { language } = i18nDTO;
      newItem.fieldNameI18n.map((i18n) => {
        if (i18n.language === language) newItem.fieldName = i18n.value;
      });
      newItem.promptInfoI18n.map((i18n) => {
        if (i18n.language === language) newItem.promptInfo = i18n.value;
      });
      fieldContent.splice(index, 1, newItem);
      i18nDTO.fieldContent = JSON.stringify(fieldContent);
      if (i18nDTO.language.toLowerCase() === this.props.language.code)
        widget.fieldContent = JSON.stringify(fieldContent);
    });
    widget.customFormFieldI18nDTOS = customFormFieldI18nDTOS;
    this.props.onChange(widget);
  };

  handleDeleteLinkageSwitchItem = (index) => {
    const { widget } = this.state;
    const customFormFieldI18nDTOS = widget.customFormFieldI18nDTOS || [];
    customFormFieldI18nDTOS.map((i18nDTO) => {
      const fieldContent = JSON.parse(i18nDTO.fieldContent);
      fieldContent.splice(index, 1);
      i18nDTO.fieldContent = JSON.stringify(fieldContent);
      if (i18nDTO.language.toLowerCase() === this.props.language.code)
        widget.fieldContent = JSON.stringify(fieldContent);
    });
    widget.customFormFieldI18nDTOS = customFormFieldI18nDTOS;
    widget.linkageSwitchItems.splice(index, 1);
    this.setState({ refreshLinkage: true });
    this.props.onChange(widget);
  };

  handleNewLinkageSwitchItem = () => {
    const { widget } = this.state;
    if (widget.linkageSwitchItems.length === parseInt(widget.maxChildNum)) {
      Modal.error({
        title: messages(
          "components.key669",
          { arg1: widget.maxChildNum } /* 最多可添加 {arg1} 个 */
        ), // 最多可添加num个
      });
    } else {
      const linkageSwitchItems = widget.fieldContent
        ? JSON.parse(widget.fieldContent)
        : [];
      const newLinkageSwitchItems = {
        fieldName: "",
        promptInfo: "",
        fieldType: "TEXT",
        messageKey: null,
        fieldConstraint: "",
        required: false,
        value: null,
        fieldNameI18n: [],
        promptInfoI18n: [],
        dataSource: "",
        id: randomString(8),
      };
      linkageSwitchItems.push(newLinkageSwitchItems);
      widget.linkageSwitchItems = linkageSwitchItems;
      const customFormFieldI18nDTOS = widget.customFormFieldI18nDTOS || [];
      customFormFieldI18nDTOS.map((i18nDTO) => {
        const fieldContent = i18nDTO.fieldContent
          ? JSON.parse(i18nDTO.fieldContent)
          : [];
        fieldContent.push(newLinkageSwitchItems);
        i18nDTO.fieldContent = JSON.stringify(fieldContent);
        if (i18nDTO.language.toLowerCase() === this.props.language.code)
          widget.fieldContent = JSON.stringify(fieldContent);
        newLinkageSwitchItems.fieldNameI18n.push({
          language: i18nDTO.language,
          value: "",
        });
        newLinkageSwitchItems.promptInfoI18n.push({
          language: i18nDTO.language,
          value: "",
        });
      });
      widget.customFormFieldI18nDTOS = customFormFieldI18nDTOS;
      this.props.onChange(widget);
    }
  };

  handleSubLanguageInput = (value, i18n, subAttr, attr) => {
    const { widget } = this.state;
    widget[subAttr] = value;
    widget[`${subAttr}I18n`] = i18n;
    this.props.onChange(widget);
  };

  // 参与人控件安全性设置
  handleChangeParticipantsImportScope = (e) => {
    const { widget } = this.state;
    widget.participantsImportScope = e.target.value;
    let temp = {};
    if (widget.fieldContent) {
      temp = JSON.parse(widget.fieldContent);
    }
    if (e.target.value !== "99") {
      temp.editable = true;
      temp.innerParticipant = 2;
    } else {
      temp.editable = false;
      temp.innerParticipant = 1;
    }
    widget.fieldContent = JSON.stringify(temp);
    this.props.onChange(widget);
  };

  // messageKey用来处理特殊控件的变化需求
  handleChangeAttr = (value, jsonName, attrName, messageKey) => {
    const { widget, companyFields, linkageCostCenters } = this.state;
    if (widget[jsonName]) {
      const temp = JSON.parse(widget[jsonName]);
      temp[attrName] = value;
      widget[jsonName] = JSON.stringify(temp);
    } else {
      widget[jsonName] = JSON.stringify({ [attrName]: value });
    }
    if (messageKey === "linkage_cost_center") {
      linkageCostCenters.data &&
        linkageCostCenters.data.map((linkCostCenter) => {
          if (linkCostCenter.costCenterOID === value) {
            const temp2 = JSON.parse(widget[jsonName]);
            temp2.subCostCenterOID = linkCostCenter.childCostCenterOID;
            widget[jsonName] = JSON.stringify(temp2);
          }
        });
    }
    if (messageKey === "employee_expand") {
      let valueMessageKey = "";
      let valueDataSource = "";
      companyFields.data.map((companyField) => {
        if (companyField.fieldOID === value) {
          valueMessageKey = companyField.messageKey;
          if (companyField.dataSource) {
            valueDataSource = companyField.dataSource;
          }
        }
      });
      widget.fieldContent = JSON.stringify({
        messageKey: valueMessageKey,
        dataSource: valueDataSource,
      });
    }
    if (attrName === "customEnumerationOID")
      widget.customEnumerationOID = value;
    if (attrName === "out") {
      if (value && !widget.outCustomFormFieldI18nDTOS) {
        widget.outFieldName = `${widget.fieldName}1`;
        widget.outPromptInfo = "";
        widget.outRequired = false;
        widget.outIsReadOnly = false;
        widget.outIsPDFShow = false;
        widget.outCustomFormFieldI18nDTOS = [];
        this.props.languageList.map((language) => {
          const i18nDTO = {
            fieldName: widget.name,
            promptInfo: "",
            language: language.code,
          };
          widget.outCustomFormFieldI18nDTOS.push(i18nDTO);
        });
      }
    }
    this.props.onChange(widget);
  };

  // 是否不需要提示文字
  isHidePrompt = (widget) => {
    // 这些messageKey的控件不需要提示文字
    const hideMessageKeyList = [
      "linkage_switch",
      "employee_expand",
      "select_participant",
      "switch",
      "image",
      "budget_detail",
      "prompt_key",
    ];
    if (hideMessageKeyList.indexOf(widget.messageKey) > -1) {
      return true;
    }
    return false;
  };

  // 是否需要配置是否只读
  isShowReadOnly = (widget) => {
    const { formType } = this.props;
    if (
      widget.messageKey === "common.date" ||
      widget.messageKey === "input" ||
      widget.messageKey === "select_department" ||
      widget.messageKey === "select_cost_center" ||
      widget.messageKey === "select_corporation_entity" ||
      widget.messageKey === "select_company" ||
      widget.messageKey === "payee" ||
      ([3001, 3002, 3003].indexOf(formType) > -1 &&
        ["start_date", "end_date"].indexOf(widget.messageKey) > -1)
    ) {
      return true;
    }
    return false;
  };

  // 开关：是否显示信息提示
  handleFieldTipsShowChange = (show) => {
    this.setState(
      {
        widget: {
          ...this.state.widget,
          isTipsShow: show,
        },
      },
      () => {
        this.props.onChange(this.state.widget);
      }
    );
  };

  // 文本：是否显示信息提示
  handleFieldTipsChange = (e) => {
    this.setState(
      {
        widget: {
          ...this.state.widget,
          fieldTips: e.target.value,
        },
      },
      () => {
        this.props.onChange(this.state.widget);
      }
    );
  };

  // 公司控件的只读属性和选择范围属性互斥
  /**
   *
   * @param type 'readOnly' 只读属性; 'isGroup' 选择范围属性
   * @returns {boolean}
   */
  checkWidgetDisabled = (type) => {
    const { widget } = this.state;
    if (widget.messageKey === "select_company") {
      if (type === "readOnly") {
        if (
          widget.fieldConstraint &&
          JSON.parse(widget.fieldConstraint) &&
          JSON.parse(widget.fieldConstraint).isGroup
        ) {
          return true;
        }
        return false;
      }
      if (type === "isGroup") {
        return widget.isReadOnly;
      }
      return false;
    }
    return false;
  };

  // 内部参与人控件不启用时，一些字段要隐藏
  // 如果是prompt_key提示文字控件，常用配置字段隐藏
  isShowComponent = (widget) => {
    let isShow =
      widget.messageKey !== "select_participant" ||
      this.getInitialValue("fieldContent", "isUse");
    if (widget.messageKey === "prompt_key") {
      isShow = false;
    }
    return isShow;
  };

  getInitialValue = (jsonName, attrName) => {
    const { widget } = this.state;
    return widget[jsonName] ? JSON.parse(widget[jsonName])[attrName] : null;
  };

  // 获取多语言输入框的字符长度
  getInpRule = (num) => {
    const inpRule = [];
    this.props.languageList.map((language) => {
      inpRule.push({
        length: num,
        language: language.code.toLowerCase(),
      });
    });
    return inpRule;
  };

  getDeepCopyData = (data) => {
    return deepCopy(data);
  };

  handleFieldButtonShowChange = (show) => {
    this.setState(
      {
        widget: {
          ...this.state.widget,
          isHidden: show,
        },
      },
      () => {
        this.props.onChange(this.state.widget);
      }
    );
  }

  handleFieldButtonChange = (e) => {
    this.setState(
      {
        widget: {
          ...this.state.widget,
          switchText: e.target.value,
        },
      },
      () => {
        this.props.onChange(this.state.widget);
      }
    );
  }

  render() {
    const { widget, baseWidget, loading } = this.state;
    const { showConfig, disabled, showFieldCode, isFormDesign } = this.props;
    console.log('widget', this.props.widget)
    return (
      <div>
        {baseWidget ? (
          <div className="widget-setting">
            {this.props.needType && (
              <div className="form-title">
                {messages("components.key608" /* 类型 */)}：
                {baseWidget._showName ? baseWidget._showName : baseWidget.name}
                {widget.messageKey === "select_cost_center" && (
                  <div className="form-title-description">
                    {/* 如需选择部门作为成本中心，请拖动左侧【部门】控件 */}
                    {messages(
                      "components.key609" /* 如需选择部门作为成本中心，请拖动左侧【部门】控件 */
                    )}
                  </div>
                )}
              </div>
            )}
            <div className="field-tips">
              <div className="form-title">
                提示信息: &nbsp;
                <Switch
                  checked={widget.isTipsShow || false}
                  checkedChildren={<Icon type="check" />}
                  unCheckedChildren={<Icon type="cross" />}
                  onChange={(e) => this.handleFieldTipsShowChange(e)}
                ></Switch>
              </div>
              {widget.isTipsShow && (
                <div>
                  <Input
                    placeholder="请输入提示信息"
                    onChange={(e) => this.handleFieldTipsChange(e)}
                    value={widget.fieldTips || ""}
                  ></Input>
                </div>
              )}
            </div>

            {widget.messageKey === 'public.assembly' ? <div className="field-tips">
              <div className="form-title">
                是否显示联动按钮: &nbsp;
                <Switch
                  checked={widget.isHidden || false}
                  checkedChildren={<Icon type="check" />}
                  unCheckedChildren={<Icon type="cross" />}
                  onChange={(e) => this.handleFieldButtonShowChange(e)}
                ></Switch>
              </div>
              {widget.isHidden && (
                <div>
                  <Input
                    placeholder="请输入提示信息"
                    onChange={e => this.handleFieldButtonChange(e)}
                    value={widget.switchText}
                  ></Input>
                </div>
              )}
            </div> : ''}

            {widget.messageKey === "select_participant" && (
              <div>
                <Checkbox
                  disabled={disabled}
                  onChange={(e) =>
                    this.handleChangeAttr(
                      e.target.checked,
                      "fieldContent",
                      "isUse"
                    )
                  }
                  checked={this.getInitialValue("fieldContent", "isUse")}
                >
                  {messages("components.key590" /* 启用【内部】参与人控件 */)}
                </Checkbox>
              </div>
            )}

            {/* 如果是常用扩展字段 */}
            {widget.fieldCode &&
              widget.fieldCode.split() &&
              widget.fieldCode.split("_")[0] === "heliosspc" && (
                <div className="field-desc-title">
                  {/* 常用扩展字段的描述 */}{" "}
                  {messages("components.key610" /* 说明： */)}
                  {widget.messageKeyDesc}
                </div>
              )}

            {this.isShowComponent(widget) && (
              <div>
                <div className="form-title">
                  {messages("components.key611" /* 标题 */)}
                </div>
                <LanguageInput
                  nameChange={(value, i18n) =>
                    this.handleLanguageInput(value, i18n, "fieldName")
                  }
                  width="100%"
                  name={widget.fieldName}
                  disabled={disabled}
                  isEdit
                  inpRule={this.getInpRule(100)}
                  mainLanguageIsRequired={false}
                  i18nName={this.getDeepCopyData(widget.fieldNameI18n)}
                />
              </div>
            )}

            {showFieldCode && (
              <div key={widget.fieldOID}>
                <div className="form-title">
                  {" "}
                  {messages("components.key612" /* 编码 */)}
                </div>
                <Input
                  placeholder={messages("common.please.input") /* 请输入 */}
                  disabled={
                    (widget.fieldCodeForDisabled &&
                      widget.fieldCodeForDisabled.length &&
                      widget.fieldCodeForDisabled.length > 0) ||
                    (widget.fieldCode &&
                      widget.fieldCode.split() &&
                      widget.fieldCode.split("_")[0] === "heliosspc")
                  }
                  defaultValue={widget.fieldCode}
                  onChange={(e) => this.handleFieldCode(e.target.value)}
                />
              </div>
            )}

            {!this.isHidePrompt(widget) && this.isShowComponent(widget) && (
              <div>
                <div className="form-title">
                  {messages("components.key613" /* 提示文字 */)}
                </div>
                <LanguageInput
                  nameChange={(value, i18n) =>
                    this.handleLanguageInput(value, i18n, "promptInfo")
                  }
                  width="100%"
                  name={widget.promptInfo}
                  disabled={disabled}
                  isEdit
                  inpRule={this.getInpRule(100)}
                  mainLanguageIsRequired={false}
                  i18nName={this.getDeepCopyData(widget.promptInfoI18n)}
                />
              </div>
            )}
            {widget.messageKey === "prompt_key" && (
              <div>
                <div className="form-title">
                  {messages("components.key613" /* 提示文字 */)}
                </div>
                <LanguageInput
                  nameChange={(value, i18n) =>
                    this.handleLanguageInput(value, i18n, "promptInfo")
                  }
                  width="100%"
                  name={widget.promptInfo}
                  disabled={disabled}
                  isEdit
                  textArea
                  inpRule={this.getInpRule(250)}
                  mainLanguageIsRequired={false}
                  i18nName={this.getDeepCopyData(widget.promptInfoI18n)}
                />
              </div>
            )}
            {isFormDesign && this.isShowComponent(widget) && (
              <div>
                <div className="form-title">
                  {messages("components.key809") /* 控件编码 */}
                </div>
                <Input
                  placeholder={messages("common.please.enter") /* 请输入 */}
                  value={widget.fieldCode}
                  onChange={(e) => this.handleFieldCode(e.target.value)}
                />
              </div>
            )}
            <div className="check-box-area">
              {/* 常用扩展字段是否必填 */}
              {widget.fieldCode &&
                widget.fieldCode.split() &&
                widget.fieldCode.split("_")[0] === "heliosspc" &&
                showConfig.required && (
                  <Checkbox
                    disabled={this.props.fieldRequiredDisabledForHeliosspc}
                    onChange={(e) =>
                      this.handleChange(e.target.checked, "required")
                    }
                    checked={widget.required}
                  >
                    {/* 必填 */}
                    {messages("components.key563" /* 必填 */)}
                  </Checkbox>
                )}

              {/* 非常用扩展字段是否必填 */}
              {!(
                widget.fieldCode &&
                widget.fieldCode.split() &&
                widget.fieldCode.split("_")[0] === "heliosspc"
              ) &&
                showConfig.required &&
                this.isShowComponent(widget) && (
                  <Checkbox
                    disabled={disabled}
                    onChange={(e) =>
                      this.handleChange(e.target.checked, "required")
                    }
                    checked={widget.required}
                  >
                    {/* 必填 */}
                    {messages("components.key563" /* 必填 */)}
                  </Checkbox>
                )}

              {this.isShowReadOnly(widget) && showConfig.isReadOnly && (
                <Checkbox
                  disabled={disabled || this.checkWidgetDisabled("readOnly")}
                  onChange={(e) =>
                    this.handleChange(e.target.checked, "isReadOnly")
                  }
                  checked={widget.isReadOnly}
                >
                  {messages("components.key614" /* 只读 */)}
                  <span className="default-span">
                    {/* 适用于有默认值带入且不允许修改，谨慎勾选使用 */}
                    {messages(
                      "components.key615" /* 适用于有默认值带入且不允许修改，谨慎勾选使用 */
                    )}
                  </span>
                </Checkbox>
              )}

              {showConfig.isPDFShow && this.isShowComponent(widget) && (
                <Checkbox
                  disabled={disabled}
                  onChange={(e) =>
                    this.handleChange(e.target.checked, "isPDFShow")
                  }
                  checked={widget.isPDFShow}
                >
                  {/* 参与打印 */}
                  {messages("components.key604" /* 参与打印 */)}
                </Checkbox>
              )}

              {showConfig.reportShow && this.isShowComponent(widget) && (
                <Checkbox
                  disabled={disabled}
                  onChange={(e) =>
                    this.handleChange(e.target.checked, "reportShow")
                  }
                  checked={widget.reportShow}
                >
                  {/* 将该字段加入报表 */}
                  {messages("components.key616" /* 将该字段加入报表 */)}
                  <span className="default-span">
                    {/* 可以在报表下载页面，样表中设置别名 */}
                    {messages(
                      "components.key617" /* 可以在报表下载页面，样表中设置别名 */
                    )}
                  </span>
                </Checkbox>
              )}

              {widget.reportShow && this.isShowComponent(widget) && (
                <Select
                  disabled={disabled}
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  onChange={(value) => this.handleChange(value, "reportOrmKey")}
                  value={widget.reportOrmKey ? widget.reportOrmKey : undefined}
                  placeholder={messages("common.please.select") /* 请选择 */}
                >
                  {widget.reportScopeList.map((item) => (
                    <Option key={item.value}>{item.messageKey}</Option>
                  ))}
                </Select>
              )}

              {showConfig.ledEnabled && this.isShowComponent(widget) && (
                <Checkbox
                  disabled={disabled}
                  onChange={(e) =>
                    this.handleChange(e.target.checked, "ledEnabled")
                  }
                  checked={widget.ledEnabled}
                >
                  {" "}
                  {messages("components.key843") /* 参与核算 */}
                </Checkbox>
              )}
              {widget.ledEnabled && this.isShowComponent(widget) && (
                <Select
                  disabled={disabled}
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  onChange={(value) => this.handleChange(value, "ledOrmKey")}
                  value={widget.ledOrmKey ? widget.ledOrmKey : undefined}
                  placeholder={messages("common.please.select") /* 请选择 */}
                >
                  {widget.adjustScopeList &&
                    widget.adjustScopeList.map((item) => (
                      <Option key={item.id}>{item.segmentName}</Option>
                    ))}
                </Select>
              )}
            </div>
            <div className="widget-custom-area">
              {loading ? <Spin /> : this.renderCustomWidget(widget)}
            </div>
          </div>
        ) : (
          <div className="widget-setting">
            {widget.messageKey === "form.description" && (
              <div className="form-title">
                {messages("components.key618" /* 说明文字 */)}
                ：
                <Switch
                  onChange={(checked) => this.handleChange(checked, "enable")}
                  defaultChecked={widget.enable}
                  disabled={disabled}
                  checkedChildren={<Icon type="check" />}
                  unCheckedChildren={<Icon type="cross" />}
                />
                <div className="form-title-description">
                  {messages(
                    "components.key619" /* 启用后员工可在该页面查看说明内容,（内容不在审批页显示，不参与打印） */
                  )}
                </div>
              </div>
            )}
            {widget.enable && widget.messageKey === "form.description" && (
              <div>
                <div className="form-title">
                  {messages("components.key611" /* 标题 */)}
                </div>
                <LanguageInput
                  nameChange={(value, i18n) =>
                    this.handleLanguageInput(value, i18n, "title")
                  }
                  width="100%"
                  name={widget.title}
                  disabled={disabled}
                  isEdit
                  inpRule={this.getInpRule(100)}
                  mainLanguageIsRequired={false}
                  i18nName={widget.titleI18n}
                />
                <div className="form-title">
                  {messages("components.key620" /* 描述内容 */)}
                </div>
                <LanguageInput
                  nameChange={(value, i18n) =>
                    this.handleLanguageInput(value, i18n, "content")
                  }
                  width="100%"
                  disabled={disabled}
                  name={widget.content}
                  isEdit
                  inpRule={this.getInpRule(600)}
                  textArea
                  mainLanguageIsRequired={false}
                  i18nName={widget.contentI18n}
                />
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode,
    language: state.main.language,
    languageList: state.login.languageList,
    profile: state.login.profile,
  };
}

WidgetSetting.propTypes = {
  valueKey: React.PropTypes.string, // key值属性，用于检查不同组件切换的flag
  showConfig: React.PropTypes.object, // 是否显示配置项，如果不配置则都显示 required必填 isReadOnly只读 isPDFShow打印
  needType: React.PropTypes.bool, // 是否需要显示控件类型
  disabled: React.PropTypes.bool, // 是否可以编辑
  isExtendField: React.PropTypes.bool, // 自定义值列表，是否加载租户级别的
  isFormDesign: React.PropTypes.bool, // 是否是表单管理处的渲染
  showFieldCode: React.PropTypes.bool, // 是否显示编码
  fieldRequiredDisabledForHeliosspc: React.PropTypes.bool, // 单独控制常用扩展是否必填，
  formType: React.PropTypes.number,
  booksID: React.PropTypes.string, // 集团模式下，当前账套id
  nowWidgetList: React.PropTypes.array, // 当前所选的所有控件
  formOID: React.PropTypes.string, // 表单管理处对应的表单
  widget: React.PropTypes.object, // 控件对象
  onChange: React.PropTypes.func, // 更改属性时的回调
  widgetList: React.PropTypes.array, // 控件列表，如果需要显示控件类型则必填
  valueListDisabled: React.PropTypes.bool, // 值列表、数字长度是否可以被修改
};

WidgetSetting.defaultProps = {
  fieldRequiredDisabledForHeliosspc: false,
  showFieldCode: false,
  isExtendField: false,
  disabled: false, // 是否可以编辑
  isFormDesign: false,
  formType: 0,
  booksID: "",
  nowWidgetList: [],
  valueListDisabled: false,
  showConfig: { required: true, isReadOnly: true, isPDFShow: true },
};

export default connect(mapStateToProps)(WidgetSetting);
